<template>
  <!--  搜索栏-->
  <el-row style="margin-top: 20px">
    <el-col :span="24">
      <el-form :model="invQuery" inline>
        <el-form-item label="药品名称">
          <el-select
              v-model="invQuery.drugId"
              placeholder="请选择药物名称"
              style="width: 150px"
          >
            <el-option
                v-for="option in drugs"
                :key="option.drugId"
                :value="option.drugId"
                :label="option.drugName"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchInv" icon="Search">搜索</el-button>
          <el-button type="warning" @click="resetting" icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!--  列表-->
  <el-row style="margin-top: 20px;height: 460px">
    <el-col :span="24">
      <el-table
          ref="invsTable"
          :data="invs"
          border
          :stripe="true"
          style="margin-top: 10px"
          height="400"
          v-show="invs.length != 0"
      >
        <el-table-column prop="drugName" label="药品名称"/>
        <el-table-column prop="invAmount" label="库存数量"/>
        <el-table-column prop="modifyTime" label="最后修改时间">
          <template #default="{row}">
            {{ formatTime(row.modifyTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template #default="{row}">
            <el-button type="warning" @click="showOutDialog(row)" size="small" icon="Download">出库
            </el-button>
            <el-button type="danger" @click="showInDialog(row)" size="small" icon="Upload">入库
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty
          v-show="invs.length == 0"
          image="https://xinghm-projectone-qd-task.oss-cn-shanghai.aliyuncs.com/exampledir/noData.jpg"
          :image-size="400">
        <el-button type="warning" @click="resetting">重置</el-button>
      </el-empty>
    </el-col>
  </el-row>
  <!-- 分页栏 -->
  <el-row style="margin-top: 20px" v-show="invs.length != 0">
    <!-- 监听页码的变化事件 -->
    <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
  </el-row>
  <!--  新增/编辑库存-->
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="600">
    <el-form :model="inv" label-width="auto">
      <el-form-item label="药品名称" required>
        <el-input v-model="inv.drugName" clearable disabled/>
      </el-form-item>
      <el-form-item label="数量" required>
        <el-input-number v-model="inv.num" min="1" :max="max"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <template v-if="isIn">
          <el-button type="primary" @click="inAndOutInv()">
            入库
          </el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="inAndOutInv()">
            出库
          </el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import jsCookie from "jscookie";
import {ElNotification} from "element-plus";
import {inAndOutInv, fetchInvList} from "@/api/inv.js";
import {fetchAllDrug} from "@/api/drug.js";

export default {
  name: "inv",
  data() {
    return {
      invQuery: {},
      token: '',
      invs: [],
      total: 0,
      pageNum: 1,
      limit: 10,
      dialogFormVisible: false,
      dialogTitle: '',
      isIn: false,
      inv: {},
      drugs: [],
      max: 0
    }
  },
  created() {
    this.token = jsCookie.get("token");
    this.getAllInv();
    this.fetchAllDrug();
  },
  methods: {
    formatTime(timeStr) {
      const appointmentTime = new Date(timeStr);
      const year = appointmentTime.getFullYear();
      const month = String(appointmentTime.getMonth() + 1).padStart(2, '0');
      const day = String(appointmentTime.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    },
    async inAndOutInv() {
      try {
        if (this.isIn == true) {
          this.inv.invAmount = this.inv.invAmount + this.inv.num;
        } else {
          this.inv.invAmount = this.inv.invAmount - this.inv.num;
        }
        const response = await inAndOutInv(this.token, this.inv);
        if (response.data.code == 200) {
          this.dialogFormVisible = false;
          ElNotification({
            title: (this.isIn == true ? '入库' : '出库') + '成功',
            message: (this.isIn == true ? '入库' : '出库') + '名称为' + this.inv.drugName + "的库存成功!",
            type: 'success',
          });
          this.getAllInv();
        } else {
          ElNotification({
            title: (this.isIn == true ? '入库' : '出库') + '成功',
            message: response.data.msg,
            type: 'error',
          });
        }
      } catch (e) {
        ElNotification({
          title: (this.isIn == true ? '入库' : '出库') + '成功',
          message: (this.isIn == true ? '入库' : '出库') + '名称为' + this.inv.drugName + "的库存失败!",
          type: 'error',
        });
      }
    },
    showInDialog(oldInv) {
      this.inv = {};
      this.inv.invId = oldInv.invId;
      this.inv.drugName = oldInv.drugName;
      this.inv.invAmount = oldInv.invAmount;
      this.inv.num = 1;
      this.max = 10000;
      this.dialogTitle = '入库';
      this.isIn = true;
      this.dialogFormVisible = true;
    },
    showOutDialog(oldInv) {
      this.inv = {};
      this.inv.invId = oldInv.invId;
      this.inv.drugName = oldInv.drugName;
      this.inv.invAmount = oldInv.invAmount;
      this.max = oldInv.invAmount;
      this.inv.num = 1;
      this.dialogTitle = '出库';
      this.isIn = false;
      this.dialogFormVisible = true;
    },
    changePage(value) {//更新页码时更新数据
      this.pageNum = value;// 修改页码数据
      // 重新加载数据
      this.getAllInv();
    },
    fetchInv() {
      this.getAllInv();
    },
    resetting() {
      this.invQuery = {};
      this.getAllInv();
    },
    async fetchAllDrug() {
      const response = await fetchAllDrug();
      this.drugs = response.data.data;
    },
    async getAllInv() {
      const response = await fetchInvList(this.invQuery.drugId, this.pageNum, this.limit);
      this.invs = response.data.data.data;
      this.total = response.data.data.total;
    }
  }
}
</script>

<style scoped>

</style>
